import React, { Component } from 'react'
import Chart from 'react-apexcharts'
import { Grid, Label } from 'semantic-ui-react'
import ChartBox from 'components/chart'
import { Query } from 'react-apollo'
import Loading from 'components/loading'
import getUserMonth from 'graphql/project/task/aggregation/labelAndTask.graphql'

export default class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      
    }
  }

  render() {
    const {
       pid, month, year, day
    } = this.props
    let time = '%'
    const monthStr = month < 10 ? `0${month}` : `${month}`
    const dayStr = day < 10 ? `0${day}` : `${day}`
    if (!month) {
      time = `${year}%`
    } else if (!day) {
      time = `${year}-${monthStr}%`
    } else {
      time = `${year}-${monthStr}-${dayStr}`
    }
    const variablesFinal = {
      time,
      pid,
    }
    return (
      <Query
        query={getUserMonth}
        variables={variablesFinal}
        fetchPolicy="network-only"
        notifyOnNetworkStatusChange
      >
        {({ loading, error, data }) => {
          if (loading) return <Loading />
          if (error) return `Error! ${error.message}`
          const labelValues = [
            {
              name: '任务数',
              data: [],
            },
            {
              name: '标注数',
              data: [],
            },
          ]
          let labelCount = 0
          let taskCount = 0
          const options = {
            chart: {
              stacked: true,
            },
            colors: ['#008FFB', '#FF4560'],
            plotOptions: {
              bar: {
                horizontal: true,
                barHeight: '80%',
              },
            },
            dataLabels: {
              enabled: false,
            },
            stroke: {
              width: 1,
              colors: ['#fff'],
            },
      
            grid: {
              xaxis: {
                showLines: false,
              },
            },
            yaxis: {
              min: -5,
              max: 5,
              title: {
                // text: 'Age',
              },
            },
            tooltip: {
              shared: false,
              x: {
                formatter(val) {
                  return val
                },
              },
              y: {
                formatter(val) {
                  return Math.abs(val)
                },
              },
            },
            title: {
              text: '成员工作对比',
            },
            xaxis: {
              categories: [],
              title: {
                text: '数量',
              },
              labels: {
                formatter(val) {
                  return Math.floor(Math.abs(val))
                },
              },
            },
          }
          if (data && data.count_work) {
            data.count_work.map((work, i) => {
              options.xaxis.categories.push(work.user_object.name)
              labelValues[0].data.push(work.labels)
              labelValues[1].data.push(0)
              options.yaxis.max = options.yaxis.max > work.labels ? options.yaxis.max : work.labels
              labelCount += work.labels
            })
          }
          if (data && data.count_task) {
            data.count_task.map((work, i) => {
              const username = work.user_object.name
              if (options.xaxis.categories.includes(username)) {
                const index = options.xaxis.categories.indexOf(username)
                labelValues[1].data[index] = -work.task
              } else {
                options.xaxis.categories.push(work.user_object.name)
                labelValues[0].data.push(0)
                labelValues[1].data.push(-work.task)
              }
              options.yaxis.min = options.yaxis.min < -work.task ? options.yaxis.min : -work.task
              taskCount += work.task
            })
          }
          /* if (data && data.user_label_create_view) {
            data.user_label_create_view.map((ann, i) => {
              const dayIndex = parseInt(ann.day.substring(8), 10) - 1
              labelValues[0].data[dayIndex] = ann.labels
              labelCount += ann.labels
            })
          }
          if (data && data.user_task_finish_view) {
            data.user_task_finish_view.map((ann) => {
              const dayIndex = parseInt(ann.day.substring(8), 10) - 1
              labelValues[1].data[dayIndex] = ann.tasks
              taskCount += ann.tasks
            })
          } */
          return (
            <Grid.Row>
              <Grid.Column width={16}>
                <Grid>
                  <Grid.Row centered columns={1}>
                    <Grid.Column>
                      <Chart
                        options={options}
                        series={labelValues}
                        type="bar"
                        height={400}
                      />
                    </Grid.Column>
                  </Grid.Row>
                  <Grid.Row centered columns={5}>
                    <Grid.Column textAlign="center">
                      <Label circular style={{ backgroundColor: '#008FFB' }} empty key="red" />
                      {`标注数: ${labelCount}`}
                    </Grid.Column>
                    <Grid.Column textAlign="center">
                      <Label
                        circular
                        style={{ backgroundColor: '#FF4560' }}
                        empty
                        key="red"
                      />
                      {`任务数: ${taskCount}`}
                    </Grid.Column>
                  </Grid.Row>
                </Grid>
              </Grid.Column>
            </Grid.Row>
          )
        }}
      </Query>
    )
  }
}
